<script setup lang="ts">
const props = defineProps({
  fourCornerInfo: {
    type: Object,
    default: null
  }
})

const cornerOrder = ['lt', 'tm', 'rt', 'lm', 'center', 'rm', 'lb', 'bm', 'rb']

const getPositionInfo = (position) => {
  if (props.fourCornerInfo !== null && props.fourCornerInfo[position]) {
    return props.fourCornerInfo[position]
  } else {
    return null
  }
}
</script>

<template>
  <div
    class="w-full h-full p-[5px] absolute left-0 top-0 z-9 text-sm leading-4 text-red-300 grid grid-cols-3 grid-rows-3 select-none"
  >
    <template v-for="position in cornerOrder" :key="position">
      <div :class="position">
        <div v-for="oneRowInfo in getPositionInfo(position)">
          <span v-for="[k, v] in Object.entries(oneRowInfo)">
            <span v-if="k" class="mr-[3px]">{{ k }}:</span>
            <span class="mr-[3px] text-nowrap">{{ v }}</span>
          </span>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.lb {
  @apply self-end;
}

.rb {
  @apply justify-self-end self-end;
}

.tm {
  @apply flex justify-center;
}

.lm {
  @apply flex items-center;
}

.bm {
  @apply flex justify-center items-end;
}

.rm {
  @apply flex justify-end items-center;
}
</style>
